<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/normal.css">
    <script src="./js/jquery.min.js" charset="utf-8"></script>
    <script src="./js/utils.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form id="normal_record_add_form" class="layui-form layui-form-pane">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">长期注意事项</label>
                <div class="layui-input-block">
                    <textarea id="importantMatter_long" name="importantMatter_long" placeholder="请输入内容"
                              class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <table class="layui-table" lay-skin="nob">
                    <tr>
                        <td>日期</td>
                        <td><input type="text" class="layui-input workShiftDate" name="workShiftDate"
                                   id="workShiftDate">
                            <input type="hidden" name="process" id="process" value="">
                        </td>
                        <td>班次</td>
                        <td>
                            <select class="workingShift" id="workingShift" name="workingShift"
                                    lay-verify="required">
                                <option value="0">日班</option>
                                <option value="1">夜班</option>
                            </select>
                        </td>
                        <td>交班人</td>
                        <td><input type="text" name="endShift" required lay-verify="required"
                                   autocomplete="off" class="layui-input"></td>
                        <td>接班人</td>
                        <td><input type="text" name="startShift" required lay-verify="required"
                                   autocomplete="off" class="layui-input"></td>
                    </tr>
                </table>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文件更新</label>
                <div class="layui-input-block">
                    <textarea name="fileUpdate" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">注意事项</label>
                <div class="layui-input-block">
                    <textarea name="importantMatter" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">不合格情况</label>
                <div class="layui-input-block">
                    <textarea name="unQualified" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">当班注意事项</label>
                <div class="layui-input-block">
                    <textarea name="importantMatter_Now" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="equipment_table_div">
                <table id="equipment_table" class="layui-table layui-form" lay-filter="equipment_table"></table>
            </div>
            <div class="layui-form-item" id="tool_table_div">
                <table id="tool_table" class="layui-table layui-form" lay-filter="tool_table"></table>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit="" onclick="return false;">增加</button>
            </div>
        </form>
    </div>
</div>
<script>
    window.onload = function () {
        dateInput("workShiftDate");
        var process = getUrlVariable(`process`);
        checkToolExist(process);
        checkEquipmentExist(process);
        getImportantMatter_long(process);
        $("#process").attr('value', process);
    };
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" checked id="status{{d.uuid}}" name="status" value={{d.uuid}} lay-skin="switch" lay-text="正常|故障"
           lay-filter="status">
</script>
<script>
    layui.use(['form', 'layer', 'jquery', 'table', 'laydate'], function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            table = layui.table;

        laydate.render({
            elem: '#workShiftDate' //指定元素
        });

        var process = getUrlVariable("process");

        table.render({
            elem: '#equipment_table'
            , url: '/getEquipment?process=' + process //数据接口
            , cols: [[ //表头
                {field: 'uuid', title: 'uuid', fixed: 'left', hide: true},
                {field: 'name', title: '设备情况', sort: true},
                {field: 'status', width: 90, title: '状态', templet: "#switchTpl"},
                {field: 'faultStartTime', title: '当班故障起始时间', edit: 'text'},
                {field: 'faultEndTime', title: '当班故障结束时间', edit: 'text'},
                {field: 'expression', title: '现象', edit: 'text'},
                {field: 'step', title: '措施', edit: 'text'},
                {field: 'maintainer', title: '维修人', edit: 'text'}
            ]]
        });

        table.render({
            elem: '#tool_table'
            , url: '/getTool?process=' + process //数据接口
            , cols: [[ //表头
                {field: 'uuid', title: 'uuid', fixed: 'left', hide: true},
                {field: 'name', title: '工具情况'},
                {field: 'detail', title: '描述'},
                {field: 'num', title: '数量'},
                {field: 'record_detail', title: '工具情况', edit: 'text'}
            ]]
        });

        //监听指定开关
        form.on('switch(status)', function (data) {
            var workShiftDate = $("#workShiftDate").val();
            var process = getUrlVariable("process");
            var workingShift = $("#workingShift").val();
            if (!this.checked) {
                // console.log(data);
                $.ajax({
                    url: "/insertEquipmentRecord",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    data: {
                        "uuid": data.value,
                        "status": "1",
                        "process": process,
                        "workShiftDate": workShiftDate,
                        "workingShift": workingShift
                    },    //参数值
                    type: "GET",   //请求方式
                    success: function (req) {
                        //请求成功时处理
                        layer.tips("成功创建记录,现在记录才会被保存", data.othis);
                    }
                });
            } else {
                $.ajax({
                    url: "/updateEquipmentRecord",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    data: {
                        "uuid": data.value,
                        "status": "0",
                        "workShiftDate": workShiftDate,
                        "workingShift": workingShift
                    },    //参数值
                    type: "GET",   //请求方式
                    success: function (req) {
                        //请求成功时处理
                        layer.tips("记录已停用,现在的修改不会被保存", data.othis);
                    }
                });
            }
        });

        //监听单元格编辑
        table.on('edit(equipment_table)',
            function (obj) {
                var workShiftDate = $("#workShiftDate").val();
                var workingShift = $("#workingShift").val();
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                var flag = $("#status" + obj.uuid).is(':checked');
                if (flag) {
                    layer.msg('设备状态为正常,修改不会保存!');
                    return;
                }
                data.workShiftDate = workShiftDate;
                data.workingShift = workingShift;
                $.ajax({
                    url: "/updateEquipmentRecord",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    data: data,    //参数值
                    type: "GET",   //请求方式
                    success: function (req) {
                        //请求成功时处理
                        layer.msg('[ ' + data.name + '] ' + field + ' 字段更改为：' + value);
                    }
                });
                // console.log(obj);

            });

        table.on('edit(tool_table)',
            function (obj) {
                var workShiftDate = $("#workShiftDate").val();
                var workingShift = $("#workingShift").val();
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                data.workShiftDate = workShiftDate;
                data.workingShift = workingShift;
                $.ajax({
                    url: "/updateToolRecord",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    data: data,    //参数值
                    type: "GET",   //请求方式
                    success: function (req) {
                        //请求成功时处理
                        layer.msg('[UUID: ' + data.uuid + '] ' + field + ' 字段更改为：' + value);
                    }
                });
                // console.log(obj);

            });

        //自定义验证规则
        form.verify({});

        //监听提交
        form.on('submit(add)',
            function (data) {
                layer.confirm('确认提交吗?提交后将不能进行修改!', {icon: 3, title:'提示'}, function(index){
                    //do something
                    submitRecord();
                    layer.close(index);
                });

            });

    });


    function submitRecord() {
        var d = $("#normal_record_add_form").serialize();
        var importantMatterLong = $("#importantMatter_long").val();
        d = d + "&importantMatter_Long=" + importantMatterLong;
        // 发异步，把数据提交给java
        $.ajax({
            url: "/updateRecord",    //请求的url地址
            dataType: "json",   //返回格式为json
            data: d,    //参数值
            type: "GET",   //请求方式
            success: function (req) {
                //请求成功时处理
                if (req.code == 0) {
                    layer.alert("增加成功", {
                            icon: 6
                        },
                        function () {
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                } else {
                    layer.alert("增加失败" + data.msg, function () {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                }
            }
        });
    }
</script>
</body>

</html>